<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>响应式设计：内嵌式媒体查询(不同视口加载不同css)</title>
		<style type="text/css">
			/*清除默认样式*/
			* {
				padding: 0;
				margin: 0;
			}
			ul, ol {
				list-style: none;
			}
			a {
				text-decoration: none;
				color: #000;
			}
			
			.box {
				width: 100%;
				overflow: hidden;
			}
			/*媒体查询 and 连接视口*/
			@media screen and (min-width: 1200px) {
				.box p {
					float: left;
					width: 50%;
					height: 200px;
					background-color: orange;
				}
				.box p:last-child {
					background-color: #DEB887;
				}
			}
			/*小于1200px，更改样式*/
			@media screen and (max-width: 1199px) {
				.box p {
					width: 100%;
					height: 200px;
					background-color: red;
				}
				.box p:last-child {
					background-color: lightblue;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>1</p>
			<p>2</p>
		</div>
		<a href="#">点击跳转...</a>
		
	</body>
</html>
